<%@ include file="/WEB-INF/views/includes.jsp"%>
<%@ page session="false"%>
<%@ page isELIgnored="false"%>
<html>
<head>
<title>Home</title>

<link rel="stylesheet" type="text/css" href="/resource/css/default.css" />
<link
	href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
	rel="stylesheet" type="text/css" />
<script
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script
	src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>


<script language="javascript">
	//$(document).ready(function() {

	// });

	jQuery(function($) {

		$("#searchCategoryDIV").dialog({
			disabled : true,
			height : 400,
			width : 400,
			autoOpen : false,
			modal: true,
			draggable: true,
			show: "blind",
			hide: "explode"
		});

		$("#searchCategory").click(function() {
			$("#searchCategoryDIV").dialog('open');
		});
		
		

	});
	
	function chooseCategory(categoryId){
		$('input[name$="category_id"]').val(categoryId);
		$("#searchCategoryDIV").dialog('close');
	}
</script>




</head>
<body>

	<h1>Create a new product</h1>


	<form:form method="post" modelAttribute="product"
		action="addProduct.do">

		<table class="dataform">
			<tr>
				<td><form:label path="product_name">product_name</form:label>
				</td>
				<td><form:input path="product_name" />
					<form:errors path="product_name" />
				</td>
			</tr>
			<tr>
				<td><form:label path="category_id" >category_id</form:label>
				</td>
				<td><form:input path="category_id"   disabled="true" readonly="true"/>
					 <input type="button" id="searchCategory" name="searchCategory" value="Search Category" />
				</td>
			</tr>
			<tr>
				<td colspan="2"><input type="submit" value="Add Product" /></td>
			</tr>
		</table>

	</form:form>

	<div   id="searchCategoryDIV">

		 <table>
		<tr>
			<th scope="col">category_id</th>
			<th scope="col">category_name</th>
		</tr>
		<c:forEach var="category" items="${searchCategoryList}">
			<tr>
				<th scope="row" class="spec"><c:out value="${category.category_id}"></c:out></th>
				<td><a href=# onclick="chooseCategory(${category.category_id});"><c:out value="${category.category_name}">
				</a> </c:out></td>
			</tr>
		</c:forEach>

	</table>



	</div>
	
 



 

</body>
</html>
